<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>hash模式</title>
  </head>
  <body>
    <ul>
      <!-- 声明式声明 -->
      <!-- 
        history模式,它路由切换只能通过js事件方式完成
       -->
      <li to="/home" class="routerLink">首页</li>
      <li to="/about" class="routerLink">关于</li>
    </ul>
    <div id="routerView"></div>

    <script>
      // 路由对应匹配渲染的视图 -- 视图组件
      const homeView = {
        render() {
          return `<h3>我是首页</h3>`
        }
      }
      const aboutView = {
        render() {
          return `<h3>关于页面</h3>`
        }
      }

      // 路由规则表,地址栏请求的地址和我对应要显示的组件对应起来
      const routes = {
        '/home': homeView,
        '/about': aboutView
      }

      window.addEventListener('load', () => {
        // 在第1次加载时,需要获取地址栏中的hash值,hash值可能还不存在要有默认值设置一下
        let path =
          location.pathname == '/' ? '/home' : location.pathname || '/home'
        if (path.endsWith('.html')) {
          path = '/home'
        }
        renderPage(path)
      })

      // history模式下,回退有一个监听事件
      window.addEventListener('popstate',e=>{
        let path =
          location.pathname == '/' ? '/home' : location.pathname || '/home'
        if (path.endsWith('.html')) {
          path = '/home'
        }
        renderPage(path)
      })

      // 通过事件来实现hash点击切换
      // hash模式,就是a标签的锚点,它在地址栏中变化,不会触发浏览器刷新
      const routerLink = document.querySelectorAll('.routerLink')
      routerLink.forEach((node) => {
        node.addEventListener('click', (e) => {
          const to = e.target.getAttribute('to') || '/home'
          // 让地址栏发生改变
          window.history.pushState(null, null, to)
          renderPage(to)
        })
      })

      function renderPage(to) {
        // 视图渲染对应的匹配成功后的组件
        const viewPage = routes[to] ?? { render: () => '<div>404</div>' }
        document.querySelector('#routerView').innerHTML = viewPage.render()
      }
    </script>
  </body>
</html>
